<template>
  <div class="content-wrapper">
    <div class="system-info">
      <h1 class="system-name">管理系统后台框架</h1>
      <p class="system-description">
        这是一个通用的后台管理系统框架，可用于各类Web应用程序的后台管理，如网站管理后台、会员中心、CMS、CRM、OA等。系统采用前后端分离架构，代码封装后简洁易用，出错概率低，同时支持移动端访问。
      </p>

      <!-- 添加用户头像轮播图 -->
      <div class="carousel-container">
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="user in users" :key="user.id">
            <div class="carousel-item">
              <el-avatar :src="user.avatar" :size="80"></el-avatar>
              <div class="user-info">
                <h3>{{ user.name }}</h3>
                <p>{{ user.role }}</p>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="system-meta">
        <span class="version">当前版本: v1.0.0</span>
        <span class="license">
              <el-tag type="success">免费开源</el-tag>
            </span>
      </div>
      <div class="action-buttons">
        <el-button type="primary" class="action-btn">
          <i class="el-icon-cloud"></i> 访问云版
        </el-button>
        <el-button type="default" class="action-btn">
          <i class="el-icon-home"></i> 访问主页
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      users: [
        {
          id: 1,
          name: "张三",
          avatar:require('@/assets/666.jpg'),
          role: "系统管理员"
        },
        {
          id: 2,
          name: "李四",
          avatar:require('@/assets/666.jpg'),
          role: "运营专员"
        },
        {
          id: 3,
          name: "王五",
          avatar:require('@/assets/666.jpg'),
          role: "开发工程师"
        },
        {
          id: 4,
          name: "赵六",
          avatar:require('@/assets/666.jpg'),
          role: "产品经理"
        },
        {
          id: 5,
          name: "钱七",
          avatar:require('@/assets/666.jpg'),
          role: "设计师"
        }
      ]
    }
  },
  methods: {}
}
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.header-left {
  display: flex;
  align-items: center;
}

.menu-button {
  margin-right: 15px;
  background: transparent;
  border: none;
}

.system-title {
  font-size: 18px;
  font-weight: 500;
  color: #1890ff;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-btn {
  margin-left: 10px;
  background: transparent;
  border: none;
}

.user-avatar {
  width: 36px;
  height: 36px;
  margin-left: 15px;
  cursor: pointer;
}

.username {
  margin-left: 10px;
  font-size: 14px;
}

.aside-container {
  background-color: #f5f7fa;
  border-right: 1px solid #e8e8e8;
}

.main-container {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
  background-color: #fafafa;
}

.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.system-info {
  background-color: #fff;
  padding: 30px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 30px;
}

.system-name {
  font-size: 28px;
  color: #333;
  margin-bottom: 20px;
  font-weight: 500;
}

.system-description {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 25px;
  max-width: 800px;
}

/* 轮播图样式 */
.carousel-container {
  margin: 30px 0;
}

.carousel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.carousel-item .user-info {
  text-align: center;
  margin-top: 15px;
}

.carousel-item .user-info h3 {
  margin: 10px 0 5px;
  color: #333;
  font-size: 18px;
}

.carousel-item .user-info p {
  margin: 0;
  color: #999;
  font-size: 14px;
}

.system-meta {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}

.version {
  font-size: 14px;
  color: #666;
  margin-right: 20px;
}

.action-buttons {
  display: flex;
  gap: 15px;
}

.action-btn {
  padding: 8px 20px;
  font-size: 14px;
}

.tech-stack {
  background-color: #fff;
  padding: 30px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.tech-title {
  font-size: 22px;
  color: #333;
  margin-bottom: 25px;
  font-weight: 500;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e8e8;
}

.tech-content {
  display: flex;
  gap: 60px;
}

.tech-column {
  flex: 1;
}

.tech-column-title {
  font-size: 16px;
  color: #1890ff;
  margin-bottom: 15px;
  font-weight: 500;
}

.tech-list {
  list-style: none;
  padding: 0;
}

.tech-list li {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}

.tech-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #1890ff;
}
</style>
